<template>
      <!-- 顶部导航栏 -->
  <van-nav-bar title="PetMeet访客"  class="nav-bar" />
  <div class="home">
    <!-- 轮播图 -->
    <van-swipe class="banner-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(banner, index) in banners" :key="index">
        <img :src="banner.image" class="banner-image" />
      </van-swipe-item>
    </van-swipe>


    <!-- 快捷入口 -->
    <div class="quick-entries">
      <div v-for="(item, index) in quickEntries" :key="index" class="entry-item" @click="handleEntryClick(item)">
        <van-icon :name="item.icon" :color="item.color" size="24" />
        <span>{{ item.title }}</span>
      </div>
    </div>

    <!-- 新闻公告 -->
    <div class="news-section">
      <div class="section-header">
        <h3>新闻公告</h3>
        <van-icon name="arrow" />
      </div>
      <div class="news-list">
        <div v-for="(item, index) in newsItems" :key="index" class="news-item">
          <div class="news-content">
            <h4>{{ item.title }}</h4>
            <span class="news-date">{{ item.date }}</span>  <span class="news-tag">{{ item.tag }}</span>
          </div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import banner1 from '@/assets/banner1.jpg';
import banner2 from '@/assets/banner2.jpg';
import banner3 from '@/assets/banner3.jpg';

export default {
  name: 'HomeView',
  data() {
    return {
      searchValue: '',
      activeTab: 0,
      banners: [
        { image: banner1 },
        { image: banner2 },
        { image: banner3 },
        // 备用测试图片（如果本地图片不显示可以取消注释）
        // { image: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg' },
        // { image: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg' }
      ],
      quickEntries: [
        { title: '访客预约', icon: 'calendar-o', color: '#1989fa' },
        { title: '今日拜访', icon: 'clock-o', color: '#ff976a' },
        { title: '园区导航', icon: 'location-o', color: '#07c160' },
        { title: '访客列表', icon: 'friends-o', color: '#ee0a24' },
        { title: '历史记录', icon: 'clock-o', color: '#7232dd' },
        { title: '员工注册', icon: 'manager-o', color: '#2196f3' }
      ],
      newsItems: [
        { title: '公司成功举办2024年度技术峰会', date: '2024-03-20', tag: '公司动态' },
        { title: '我司荣获"年度最佳创新企业"称号', date: '2024-03-18', tag: '荣誉奖项' },
        { title: '新项目启动：智慧园区管理系统正式上线', date: '2024-03-15', tag: '项目动态' },
        { title: '公司完成新一轮融资，估值突破10亿', date: '2024-03-10', tag: '公司动态' }
      ]
    }
  },
  methods: {
    handleEntryClick(item) {
      if (item.title === '员工注册') {
        this.$router.push('/employee-register')
      } else if (item.title === '访客预约') {
        this.$router.push('/visitor-appointment')
      } else if (item.title === '今日拜访') {
        this.$router.push('/today-visit')
      } else if (item.title === '园区导航') {
        this.$router.push('/park-navigation')
      } else if (item.title === '访客列表') {
        this.$router.push('/visitor-list')
      } else if (item.title === '历史记录') {
        this.$router.push('/visit-history')
      }
    }
  }
}
</script>

<style scoped>
.home {
  padding: 16px;
  background-color: #f7f8fa;
  min-height: 100vh;
}

.banner-swipe {
  margin: 0px 0px 16px;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.quick-entries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 16px 0;
  background-color: #ffffff;
  border-radius: 8px;
  margin: 16px 0;
}

.entry-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.entry-item span {
  font-size: 14px;
  color: #646566;
}

.news-section {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h3 {
  margin: 0;
  font-size: 16px;
  color: #323233;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f2f2f2;
}

.news-content {
  flex: 1;
}

.news-tag {
  display: inline-block;
  padding: 2px 6px;
  background-color: #f2f2f2;
  color: #ff6b6b;
  font-size: 12px;
  border-radius: 4px;
  margin-right: 8px;
}

.news-content h4 {
  margin: 8px 0;
  font-size: 14px;
  color: #323233;
}

.news-date {
  font-size: 12px;
  color: #969799;
}
</style>